<template>
  <div id="abnormalPage">
    <HeadNav
      type="inquire"
      ref="head"
      :show="1"
      @publisherChange="publisherChange()"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="inquire" sort="abnormal"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="pagePower">
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">
                  <a-tabs :activeKey="tabKey" @change="callback">
                    <a-tab-pane key="1" tab="疑似异常品种"></a-tab-pane>
                    <a-tab-pane key="2" tab="信息缺失"></a-tab-pane>
                  </a-tabs>
                </div>
              </div>
            </div>
            <div class="model-container" v-if="tabKey == '1'">
              <div class="model-bg clearfix" style="padding: 10px 15px">
                <div class="input-width float-left">
                  <a-input v-model="saleStart" placeholder="昨日销量" />
                </div>
                <div class="bar float-left">-</div>
                <div class="input-width float-left">
                  <a-input v-model="saleEnd" placeholder="昨日销量" />
                </div>
                <div class="input-width float-left" style="margin-left: 20px">
                  <a-input v-model="incrStart" placeholder="涨跌幅" />
                </div>
                <div class="bar float-left">-</div>
                <div class="input-width float-left">
                  <a-input v-model="incrEnd" placeholder="涨跌幅" />
                </div>
                <div class="input-width float-left" style="margin-left: 20px">
                  <a-input v-model="diffStart" placeholder="波动差值" />
                </div>
                <div class="bar float-left">-</div>
                <div class="input-width float-left">
                  <a-input v-model="diffEnd" placeholder="波动差值" />
                </div>
                <div class="float-right">
                  <a-button type="primary" @click="search">检索</a-button>
                  <a-button style="margin-left: 5px" @click="downLoad"
                    >导出数据</a-button
                  >
                </div>
              </div>
            </div>
            <!-- 疑似异常 -->
            <div class="model-container" v-if="tabKey == '1'">
              <div
                class="model-bg"
                style="
                  min-height: 740px;
                  position: relative;
                  padding-bottom: 75px;
                "
              >
                <div class="section-title">疑似异常</div>
                <div class="table">
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="210" />
                      <col width="100" />
                      <col width="100" />
                      <col width="140" />
                      <col width="100" />
                      <col width="120" />
                      <col width="280" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>品种信息</td>
                        <td style="text-align: right">昨日销量</td>
                        <td style="text-align: right">昨日涨跌幅</td>
                        <td style="text-align: right">品种波动</td>
                        <td style="text-align: right">波动差值</td>
                        <td style="text-align: right">剩余库存</td>
                        <td style="text-align: right">异常原因验证</td>
                      </tr>
                    </thead>
                    <tbody v-if="list.length > 0">
                      <tr v-for="(item, index) in list" :key="index">
                        <td>
                          <div class="goods-desc">
                            <span class="goods-image" v-if="item.cover_pic">
                              <img
                                :src="item.cover_pic"
                                alt
                                style="width: 40px; height: 40px"
                              />
                            </span>
                            <span
                              v-else
                              class="no-pic"
                              style="min-width: 40px; min-height: 40px"
                            ></span>
                            <span
                              class="click-font goods-name"
                              :title="item.title"
                              @click.stop="$toDetail(item.goods_id)"
                              >{{ item.title }}</span
                            >
                          </div>
                        </td>
                        <td style="text-align: right">
                          <div class="main-font">{{ item.sale_num }}</div>
                          <div>DMS[{{ item.dms }}]</div>
                        </td>
                        <td style="text-align: right">
                          <span class="percent" v-if="item.sale_incr > 0"
                            >+{{ item.sale_incr }}%</span
                          >
                          <span class="green" v-else-if="item.sale_incr < 0"
                            >{{ item.sale_incr }}%</span
                          >
                          <span v-else>--</span>
                        </td>
                        <td style="text-align: right">
                          <div>
                            <span class="percent" v-if="item.dms_percent > 0"
                              >+{{ item.dms_percent }}%</span
                            >
                            <span class="green" v-else-if="item.dms_percent < 0"
                              >{{ item.dms_percent }}%</span
                            >
                            <span v-else>--</span>
                          </div>
                          <div>类目波动[{{ item.cate_percent }}%]</div>
                        </td>
                        <td style="text-align: right">
                          <span class="percent" v-if="item.diff > 0"
                            >+{{ item.diff.toFixed(2) }}%</span
                          >
                          <span class="green" v-else-if="item.diff < 0"
                            >{{ item.diff.toFixed(2) }}%</span
                          >
                          <span v-else>--</span>
                        </td>
                        <td style="text-align: right">
                          <div class="main-font">{{ item.stock_left }}</div>
                          <div>周转率[{{ item.turnover }}%]</div>
                        </td>
                        <td style="text-align: right">
                          --
                          <!-- <span class="data-tab data-tab-eight">{{}}</span> -->
                        </td>
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="7" style="text-align: center">
                          <div style="margin: 170px 0"><a-empty /></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- 分页 -->
                <div
                  style="position: absolute; right: 15px; bottom: 15px"
                  v-if="list.length > 0"
                >
                  <a-pagination
                    :show-total="(total) => `共 ${total}条数据`"
                    :default-current="1"
                    v-model="page"
                    :total="total"
                    :defaultPageSize="pageSize"
                    @change="onShowSizeChange"
                  />
                </div>
              </div>
            </div>
            <!-- 信息缺失 -->
            <div class="model-container" v-if="tabKey == '2'">
              <div class="model-bg clearfix" style="padding: 10px 15px">
                <div class="info-input-width float-left">
                  <a-input v-model="goodsIsbn" placeholder="搜索品种ISBN" />
                </div>
                <div class="float-right">
                  <a-button
                    type="primary"
                    style="width: 120px"
                    @click="Infosearch"
                    >检索</a-button
                  >
                </div>
              </div>
            </div>
            <div class="model-container" v-if="tabKey == '2'">
              <div
                class="model-bg"
                style="
                  min-height: 740px;
                  position: relative;
                  padding-bottom: 75px;
                "
              >
                <div class="section-title">信息缺失</div>
                <div class="table">
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="330" />
                      <col width="100" />
                      <col width="80" />
                      <col width="540" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>品种信息</td>
                        <td>销售层级</td>
                        <td style="text-align: center">DMS</td>
                        <td style="text-align: right">缺失内容</td>
                      </tr>
                    </thead>
                    <tbody v-if="infoList.length > 0">
                      <tr v-for="(item, index) in infoList" :key="index">
                        <td>
                          <div class="goods-desc">
                            <div
                              style="width: 60px; height: 60px"
                              v-if="item.cover_pic"
                            >
                              <img
                                :src="item.cover_pic"
                                alt
                                style="width: 60px; height: 60px"
                              />
                            </div>
                            <span
                              v-else
                              class="no-pic"
                              style="min-width: 60px; min-height: 60px"
                            ></span>
                            <div class="goods-info" style="height: 60px">
                              <div
                                class="click-font goods-name"
                                :title="item.name"
                                @click="$toDetail(item.goods_id)"
                              >
                                {{ item.name }}
                              </div>
                              <div style="margin-left: 5px">
                                <span
                                  class="data-tab data-tab-eleven"
                                  v-if="
                                    item.sale_type == '滞销品种' ||
                                    item.sale_type == '停售品种'
                                  "
                                  >{{ item.sale_type }}</span
                                >
                                <span
                                  class="data-tab data-tab-eight"
                                  v-else-if="item.sale_type == '畅销品种'"
                                  >{{ item.sale_type }}</span
                                >
                                <span
                                  class="data-tab data-tab-ten"
                                  v-else-if="item.sale_type"
                                  >{{ item.sale_type }}</span
                                >
                              </div>
                            </div>
                          </div>
                        </td>
                        <td>
                          <div class="main-font">
                            {{ item.month_sale_text }}
                          </div>
                        </td>
                        <td style="text-align: center">
                          <span class="main-font">{{ item.dms }}</span>
                        </td>
                        <td style="text-align: right">
                          <span
                            class="data-tab data-tab-eleven"
                            v-for="(citem, cindex) in item.incomplete"
                            :key="cindex"
                            >{{ citem }}</span
                          >
                        </td>
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="4" style="text-align: center">
                          <div style="margin: 170px 0"><a-empty /></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- 分页 -->
                <div
                  style="position: absolute; right: 15px; bottom: 15px"
                  v-if="infoList.length > 0"
                >
                  <a-pagination
                    :show-total="(total) => `共 ${infoTotal}条数据`"
                    :default-current="1"
                    v-model="infoPage"
                    :total="infoTotal"
                    :defaultPageSize="pageSize"
                    @change="infoOnShowSizeChange"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 导出弹层 -->
    <a-modal
      v-model="downModal"
      width="600px"
      title="导出疑似异常品种数据"
      on-ok="handleOk"
    >
      <template slot="footer">
        <a-button key="submit" type="primary" @click="handleOk">确定</a-button>
      </template>
      <div class="popup">
        <div class="option">
          <span class="lable">导出类型</span>
          <div class="normal">
            <a-radio-group name="radioGroup" v-model="downLoadType" size="small">
              <a-radio :value="1">单日数据</a-radio>
              <a-radio :value="2">单品数据</a-radio>
            </a-radio-group>
          </div>
        </div>
        <div class="option" v-if="downLoadType == 1">
          <span class="lable">导出日期</span>
          <div class="normal">
            <a-date-picker format="YYYY-MM-DD" inputReadOnly v-model="period" />
          </div>
        </div>
        <div class="option" v-if="downLoadType == 2">
          <span class="lable">导出日期</span>
          <div class="normal">
            <a-range-picker format="YYYY-MM-DD" @change="conChange" inputReadOnly :value="[periodStart,periodEnd]" />
          </div>
        </div>
        <div class="option" v-if="downLoadType == 2">
          <span class="lable">导出品种</span>
          <div class="normal">
            <a-input placeholder="请输入品种ID" v-model="goodsId" />
          </div>
        </div>
      </div>
    </a-modal>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
  </div>
</template>
<style scoped lang="scss">
#abnormalPage {
  .input-width {
    width: 120px;
  }
  .bar {
    width: 27px;
    text-align: center;
    line-height: 32px;
  }
  .info-input-width {
    width: 300px;
    &:nth-child(2) {
      margin-left: 10px;
    }
  }
}
.popup{
  font-size: $fontSize - 2;
  min-height: 200px;
  & .option{
    margin-top: 10px;
    & .lable{
      display: inline-block;
      width: 90px;
      text-align: right;
      color: $fontColor2;
    }
    & .normal{
      display: inline-block;
      width: 300px;
      margin-left: 5px;
      color: $fontColor1;
      line-height: 32px;
    }
  }
}
</style>
<script>
import {
  QUERY_MONITOR_ABNORMALGOODS,
  QUERY_MONITOR_INCOMPLETEGOODS,
  QUERY_MONITOR_ABNORMALGOODSEXPORT,
} from "../../apis/inquire.js";
export default {
  data() {
    return {
      pagePower: true,
      tabKey: "1",
      isLoading: true,
      list: [],
      page: 1,
      total: 0,
      pageSize: 20,
      saleStart: "",
      saleEnd: "",
      incrStart: "",
      incrEnd: "",
      diffStart: "",
      diffEnd: "",
      goodsIsbn: "",
      infoList: [],
      infoPage: 1,
      infoTotal: 0,
      downModal: false,
      downLoadType: 0,
      period: null,
      periodStart: null,
      periodEnd: null,
      goodsId: "",
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 异常品种--数据
    async getData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        page: this.page,
        page_size: this.pageSize,
        timestamp: tStamp,
      };
      if (this.saleStart) {
        data.sale_num_start = this.saleStart;
      }
      if (this.saleEnd) {
        data.sale_num_end = this.saleEnd;
      }
      if (this.incrStart) {
        data.sale_incr_start = this.incrStart;
      }
      if (this.incrEnd) {
        data.sale_incr_end = this.incrEnd;
      }
      if (this.diffStart) {
        data.diff_start = this.diffStart;
      }
      if (this.diffEnd) {
        data.diff_end = this.diffEnd;
      }
      data.sign = this.$getSign(data);
      let res = await QUERY_MONITOR_ABNORMALGOODS(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.total = res.data.total_count;
        this.list = [];
        this.list = res.data.list;
        this.$nextTick(() => {
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 异常品种--信息缺失
    async getLackData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        isbn: this.goodsIsbn,
        page: this.infoPage,
        page_size: this.pageSize,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await QUERY_MONITOR_INCOMPLETEGOODS(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.infoTotal = res.data.total_count;
        this.infoList = [];
        this.infoList = res.data.list;
        this.$nextTick(() => {
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 异常品种--导出
    async uploadData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        timestamp: tStamp,
      };
      if(this.downLoadType == 1){
        data.period = this.$moment(this.period).format("YYYY-MM-DD").replace(/-/g,"");
      }else{
        data.period_start = this.periodStart.replace(/-/g,"");
        data.period_end = this.periodEnd.replace(/-/g,"");
        data.goods_id = this.goodsId;
      }
      data.sign = this.$getSign(data);
      let res = await QUERY_MONITOR_ABNORMALGOODSEXPORT(data);
      if (res.code == 0) {
        this.downModal = false;
        let _this = this;
        this.$confirm({
          title: "数据导出中",
          content: "数据表格文件正在生成中，前往数据导出任务列表下载",
          okText: "前去下载",
          cancelText: "取消",
          okType: "primary",
          onOk() {
            _this.$router.push({name:"dataupload"});
          },
          onCancel() {}
        });
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    callback(key) {
      this.tabKey = key;
      this.isLoading = true;
      if (key == "1") {
        this.getData();
      } else if (key == "2") {
        this.getLackData();
      }
    },
    // 导出数据
    downLoad() {
      this.downLoadType = 0;
      this.period = null;
      this.periodStart = null;
      this.periodEnd = null;
      this.goodsId = "";
      this.downModal = true;
    },
    handleOk(){
      if(this.downLoadType == 0){
        this.$refs.head.globalTip(1,"请选择导出类型！", 0);
        return;
      }else if(this.downLoadType == 1){
        if(!this.period){
          this.$refs.head.globalTip(1,"请选择导出日期！", 0);
          return;
        }
      }else if(this.downLoadType == 2){
        if(!this.periodStart){
          this.$refs.head.globalTip(1,"请选择导出日期！", 0);
          return;
        }
        if(!this.goodsId){
          this.$refs.head.globalTip(1,"请输入品种ID！", 0);
          return;
        }
      }
      this.uploadData();
    },
    conChange(date, dateString){
      this.periodStart = dateString[0];
      this.periodEnd = dateString[1];
    },
    // 异常品种--分页
    onShowSizeChange(page, pageSize) {
      this.isLoading = true;
      this.page = page;
      this.getData();
    },
    // 信息缺失--分页
    infoOnShowSizeChange(page) {
      this.isLoading = true;
      this.infoPage = page;
      this.getLackData();
    },
    // 异常品种--检索
    search() {
      if (
        Object.is(NaN, Number(this.saleStart)) ||
        Object.is(NaN, Number(this.saleEnd)) ||
        Object.is(NaN, Number(this.incrStart)) ||
        Object.is(NaN, Number(this.incrEnd)) ||
        Object.is(NaN, Number(this.diffStart)) ||
        Object.is(NaN, Number(this.diffEnd))
      ) {
        this.$refs.head.globalTip(1, "搜索内容需为数字！", 0);
        return;
      }
      this.isLoading = true;
      this.getData();
    },
    // 信息缺失--检索
    Infosearch() {
      this.isLoading = true;
      this.getLackData();
    },
    publisherChange() {
      this.isLoading = true;
      this.page = 1;
      this.saleStart = "";
      this.saleEnd = "";
      this.incrStart = "";
      this.incrEnd = "";
      this.diffStart = "";
      this.diffEnd = "";
      this.tabKey = "1";
      this.getData();
    },
  },
};
</script>